<template>
  <div>
    <header>
      <a class="headerback" @click="go()">
        <img src="/img/back.png" />
      </a>
      <div class="indexsearch">
        <input
          type="text"
          class="search"
          placeholder="  跑步鞋                                      "
        />
      </div>

      <a href="/home" class="index">
        <img src="/img/goindex.png" />
      </a>

    </header>
    <div class="condition">
      <ul class="condition_in">
        <li
          v-for="(item, index) in arr"
          :key="index"
          @click="get(index)"
          :class="{ active: currentIndex == item.id }"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="choose">
      <span>
        <p>分类</p>
        <i></i>
      </span>
      <span>
        <p>品牌</p>
        <i></i>
      </span>
      <span>
        <p>尺码</p>
        <i></i>
      </span>
    </div>
    <ul class="showTime">
      <li v-for="(item, index) in list" :key="index" @click="getindex(index)">
        <img :src="item.listSrc" alt="" />
        <p>{{ item.listTitle }}</p>
        <div class="inshow">
          <span class="one">￥{{ item.sale_price }}</span>
          <span class="two">{{ item.dis }}折</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import goodsApi from "../api/goodsApi";
export default {
  data() {
    return {
      active: null,
      currentIndex: "",
      lock: 1,
      arr: [
        {
          id: 0,
          name: "销 量"
        },
        {
          id: 1,
          name: "价 格↑↓"
        },
        {
          id: 2,
          name: "最 新"
        },
        {
          id: 3,
          name: "筛 选"
        }
      ],
      list: []
    };
  },

  components: {},

  methods: {
    go() {
      this.$router.push("/list");
    },
    get(val) {
      //高亮，顺便获取点的是那个下标
      this.currentIndex = val; //高亮val
      localStorage.setItem("type", val); //内置封装的localStorage 第一个参数key ，第二个是value值
      if (val == 1) {
        //点击排序
        //锁要设置在全局才行
        if (this.lock) {
          this.list.sort((x, y) => {
            this.lock = 0;
            return x.sale_price - y.sale_price;
          });
        } else {
          this.list.sort((x, y) => {
            this.lock = 1;
            return y.sale_price - x.sale_price;
          });
        }
      } else {
        return;
      }
    },
    getindex(val) {
      //存储sku，给跳转页取出渲染
      //console.log(val);
      let res = this.list[val];
      //console.log(res);
      //this.$router.push({ name: "details", query: { res } });
      let i = localStorage.setItem("sku", JSON.stringify(res));
      //let z = JSON.stringify(localStorage.getItem("sku"));
      //console.log(z)
      this.$router.push("/details");
    },
    getData() {
      goodsApi
        .getGoods({ page: "detail" })
        .then(res => {
          this.list = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    //利用钩子发axios
    this.getData();
  }
};
</script>

<style scoped lang='scss'>
@import "@/assets/sass/common.scss";
@import "@/assets/sass/vw.scss";
header {
  display: flex;
  justify-content: space-between;
  background-color: #f5f5f5;

  .headerback img {
    width: vw(80);
    height: vw(100);
  }

  .indexsearch {
    // width: vw(572);
    // height: vw(100);
    // // background-color: orange;
    // font-size: 16px;
    // text-align: center;
    // line-height: vw(100);
    display: flex;
    flex-direction: column;
    justify-content: center;
    input {
      height: vw(50);
      width: vw(500);
      border-radius: vw(45);
      border-color: #999;
    }
  }
  .index img {
    width: vw(92);
    height: vw(100);
  }
}
.condition {
  width: vw(750);
  height: vw(85);
  .condition_in {
    display: flex;
    justify-content: space-around;
    li {
      font-size: vw(28);
      line-height: vw(85);
      width: vw(140);
      text-align: center;
    }
  }
}
.active {
  color: #d70057;
  border-bottom: vw(1) solid #d70057;
}
.van-tab__text {
  font-size: vw(50);
}
.choose {
  display: flex;
  width: vw(750);
  padding: vw(34) 0;
  justify-content: space-around;
  line-height: vw(60);
  border-bottom: vw(1) solid #e5e5e5;
  border-top: vw(1) solid #e5e5e5;
  span {
    font-size: vw(26);
    width: vw(150);
    text-align: center;
    border-radius: vw(5);
    background: #f4f4f4;
  }
}
.showTime {
  padding: 0 vw(6);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  img {
    width: vw(350);
    height: vw(350);
  }
  p {
    overflow: hidden; /*超出部分隐藏*/
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    white-space: nowrap; /*规定段落中的文本不进行换行 */
    width: vw(350); /*需要配合宽度来使用*/
    color: #666666;
  }
  .inshow {
    display: flex;
    width: vw(350);

    .one {
      color: #d70057;
      font-size: vw(36);
      margin-right: vw(35);
    }
    .two {
      height: vw(40);
      color: #d70057;
      border: vw(1) solid #d70057;
      line-height: vw(40);
      padding: 0 vw(5);
      border-radius: vw(10);
    }
  }
}
</style>